<template>
    <div class="hallMain">
        <div class="hallMain-L">
            <div class="loopItem" :class="{ 'isActive': isactive == item.id }" v-for="item in menuList" :key="item.id"
                @click="pointItem(item.id)">{{ item.partner_company_name }}</div>
        </div>
        <div class="hallMain-R">
            <div class="formDiv">
                <div style="display: flex;align-items: center;">
                    <span>名称</span><el-input v-model="ceremony_hall_name" style="width: 250px;margin-right: 10px;"></el-input>
                <el-button type="primary" plain @click="restForm">重置</el-button>
                <el-button type="primary" @click="getHallList">查询</el-button>
                </div>
                <el-button type="primary" @click="addHall">新增</el-button>
            </div>
            <div class="tableDiv">
                <el-table :data="tableData" :height="tabelHeight" class="tableInDiv">
                    <el-table-column label="序号" width="50" align="center" type="index">
                    </el-table-column>
                    <el-table-column label="名称" align="center" prop="ceremony_hall_name">
                        <template slot-scope="scope">
                            <div style="color: #409eff; cursor: pointer" @click="editUser(scope.row.id, '仪式厅详情')">
                                {{ scope.row.ceremony_hall_name }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="地址" align="center" prop="ceremony_hall_addr">
                    </el-table-column>
                    <el-table-column label="备注" align="center" prop="remarks">
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="editUser(scope.row.id, '编辑仪式厅')">编辑</el-button>
                            <el-button type="text" style="color: #F56C6C;" @click="delUser(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="page" @current-change="handleCurrentChange" :current-page.sync="currentPage"
                    :page-size="10" layout="total, prev, pager, next" :total="pageTotal">
                </el-pagination>
            </div>
        </div>
        <addHall ref="addhall" :firmList="menuList"></addHall>
    </div>
</template>
<script>
import addHall from './addHall.vue'
export default {
    components:{
        addHall
    },
    data() {
        return {
            isactive: '',
            ceremony_hall_name:'',
            menuList: [],
            tableData:[],
            tabelHeight:'calc(100% - 40px)',
            pageTotal:10,
            currentPage:1,
        }
    },
    methods: {
        delUser(id) {
            this.$confirm('此操作将删除该信息, 是否继续删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                confirmButtonClass: 'btnConfirm',
                cancelButtonClass: 'btnCancel',
                type: 'warning'
            }).then(() => {
                this.$api.deleteHall(id).then(res => {
                    this.$message.success('删除成功')
                    this.getHallList()
                }).catch(error => {
                    this.$message.error(error.message)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                })
            })

        },
        addHall() {
            this.$refs.addhall.addNewFirm()
            // this.$refs.addHall.firmList = this.menuList
        },
        pointItem(val) {
            this.isactive = val
            this.getHallList()
        },
        restForm(){
            this.ceremony_hall_name = ''
            this.currentPage=1
            this.getHallList()
        },
        editUser(id,val){
            this.$refs.addhall.getDetail(id,val)
            // this.$refs.addHall.firmList = this.menuList
        },
        getHallList() {
            this.$api.getList({
                page: this.currentPage,
                page_size: 10,
                ceremony_hall_name:this.ceremony_hall_name,
                partner_company_id:this.isactive
            }).then(res => {
                this.tableData=res.data
                this.pageTotal=res.total
            }).catch(err => {
                this.$message.error(err.message) 
            })
        },
        getMenuList() {
            this.$api.getFirmItemList().then(res => {
                this.menuList = res.data
                res.data.length>0?this.isactive = this.menuList[0].id:this.isactive = ''
                this.getHallList()
            }).catch(err => {
                this.$message.error(err.message)
            })
        },
        handleCurrentChange(val) {},
    },
    mounted() {
        console.log(this.$route.query.id == undefined);
        if (this.$route.query.id == undefined) {
            this.getMenuList()
        }else{
            this.isactive = this.$route.query.id
            this.$api.getFirmItemList().then(res => {
                this.menuList = res.data
                this.getHallList()
            }).catch(err => {
                this.$message.error(err.message)
            })
        }
        
        
    }
}
</script>
<style lang="less" scoped>
.hallMain {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .hallMain-L {
        width: 220px;
        padding: 15px 10px;
        height: calc(100% - 30px);
        border-radius: 16px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background: #fff;

        .loopItem {
            width: 100%;
            height: 35px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            cursor: pointer;
        }

        .loopItem:hover {
            color: #79bbff;
        }

        .isActive {
            color: #409EFF;
            font-weight: 500;
        }
    }

    .hallMain-R {
        width: calc(100% - 260px);
        height: calc(100% - 20px);
        overflow-y: auto;
        margin-left: 10px;
        border-radius: 16px;
        background: #fff;
        padding: 10px;

        .formDiv {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 80px;
            width: 100%;
            box-sizing: border-box;
            span {
                display: block;
                margin-right: 10px;
            }
        }

        .tableDiv {
            width: 100%;
            height: calc(100% - 80px);
            box-sizing: border-box;
            .tableInDiv{
                width: 100%;
                height: calc(100% - 40px);
            }
            .page{
                text-align: right;
            }
        }
    }
}
</style>